<template>
  <view>
    <navbar top="80rpx"></navbar>
    <view class="container">
      <view class="search-wrapper">
        <input type="text" placeholder="请输入关键词" v-model="keyword"/>
        <button class="btn-normal" @click="onSearchAssets(keyword)">搜索</button>
      </view>
      <view v-show="0 < assets.list.length">
        <view class="assets-list">
        <view class="page_list">
        	<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
        		@scrolltolower="lower" @scroll="scroll"
        		refresher-enabled
        		enable-back-to-top
        		@refresherpulling="refresherrefresh"
        		:refresher-triggered="refresherStatus">
        		<view class="list" v-for="item in assets.list" :key="item.id" @tap.stop.prevent="gotoDetail(item.id)">
        			
        			<view class="">
        				<view class="goods_name">
        					<span>{{item.goods_name}}</span>
        					<span :class="item.can_buy?'sale':'lock'">{{item.can_buy?'寄售':'锁定中'}}</span>
        				</view>
        				<view class="goods_sort">
        					<span style="font-weight: 600;">#{{item.sort_no}}</span>/{{item.market_num}}
        				</view>
        			</view>
        			<view class="goods_price">
        				<span>￥{{item.sale_price}}</span>
        				<uni-icons style="margin-left: 20rpx;" type="forward" size="10"></uni-icons>
        			</view>
        		</view>
        		<view v-if="!this.assets.hasMore && 0 !== assets.list.length" style="color: #B5B5B5;font-style: 18rpx;display: flex;justify-content: center;padding: 10rpx;">
        			已经到底啦
        		</view>
        		<view v-if="!assets.loading && 0 == assets.list.length" class="yoshop-notcont">
        			<text class="iconfont icon-wushuju"></text>
        			<view class="cont">暂无寄售信息</view>
        		</view>
        	</scroll-view>
        </view>
      </view>
    </view>
    <view v-if="!assets.loading && 0 == assets.list.length" class="yoshop-notcont">
      <text class="iconfont icon-wushuju"></text>
      <view class="cont">没有搜索到藏品~</view>
    </view>
  </view>
  </view>
</template>

<script>
const app = getApp();
import navbar from "@/components/navbar/navbar";
import easyLoadimage from "@/components/easy-loadimage/easy-loadimage";
export default {
	components: {
    navbar,
	  easyLoadimage,
	},
  data() {
    return {
      sort: {
        options: [{
          title: '价格排序',
          order_by: 'sale_price',
          sort_by: 'asc', // 升序：asc,降序：desc
        }, {
          title: '时间排序',
          order_by: 'create_time',
          sort_by: 'desc', // 升序：asc,降序：desc
        }],
        current: 0, // 价格和时间排序二选一
      },
      assets: {
        page: 1,
        loading: false,
        hasMore: false,
        list: []
      },
      keyword: '',
	  refresherStatus: false,
	  topInfo: {},
	  name: '',
	  scrollTop: 0,
	  old: {
	  	scrollTop: 0
	  }
    }
  },
  onLoad: function() {},
  onReachBottom() {
    if (this.assets.hasMore && !this.assets.loading) {
      this.requestData();
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
	  onSearchAssets(name){
		this.assets.page = 1;
		this.name = name;  
		this.old.scrollTop = 0
		this.scrollTop = 0
		if(this.name != ''){
			this.requestData();
			this.getCollectDetail()
		}
	  },
    refresherrefresh(){
    	let _this = this
    	_this.refresherStatus = true
    	this.assets.page = 1;
    	if(this.name != ''){
    		this.requestData(() => {
    			_this.refresherStatus = false
    		});
    	}	
    },
    //	获取藏品信息 头部
    getCollectDetail(){
    	app._get('ordersale/getCollectDetail', {
    		page: 1,
    		order_by: 'sale_price',
    		sort_by: 'asc',
    		search: this.name
    	}, (res) => {
    		this.topInfo = res.data	
    	}, null, () => {
    	})
    },
    gotoDetail(id){
    	app.navigationTo(`pages/market/detail/detail?id=${id}`)
    },
    // 滑动触顶
    upper: function(e) {
    	// console.log(e)
    },
    // 滑动触底
    lower: function(e) {
    	if (this.assets.hasMore && !this.assets.loading) {
    		this.requestData();
    	}
    },
    // 滑动
    scroll: function(e) {
    	// console.log(e)
    	this.old.scrollTop = e.detail.scrollTop
    },
    // 回顶部
    goTop: function(e) {
    	// 解决view层不同步的问题
    	this.scrollTop = this.old.scrollTop
    	this.$nextTick(function() {
    		this.scrollTop = 0
    	});
    	uni.showToast({
    		icon: "none",
    		title: "纵向滚动 scrollTop 值已被修改为 0"
    	})
    },
    requestData(callback) {
    	this.assets.loading = true;
    	uni.showLoading();
    	app._get('ordersale/salelists', {
    		page: this.assets.page,
    		order_by: 'sale_price',
    		sort_by: 'asc',
    		search: this.name
    	}, (res) => {
    		let {
    			data,
    			total
    		} = res.data;
    		let {
    			page,
    			list,
    			hasMore
    		} = this.assets;
    		if (1 == page) {
    			list.length = 0;
    		}
    		list = [...list, ...data];
    		hasMore = total > list.length;
    		if (hasMore) {
    			page++;
    		}
    		this.assets.page = page;
    		this.assets.list = list;
    		this.assets.hasMore = hasMore;
    
    	}, null, () => {
    		this.assets.loading = false;
    		uni.hideLoading();
    		callback && callback();
    	})
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../index/index.scss";

.topInfo{
	position: absolute;
	top: 0;
	z-index: 999;
	width: 100%;
	.goods_name{
		text-align: center;
		width: 300rpx;
		position: relative;
		top: 100rpx;
		left: 50%;
		margin-left: -150rpx;
		color: #fff;
		font-weight: 600;
		font-size: 36rpx;
	}
	.num{
		text-align: center;
		width: 400rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		top: 200rpx;
		left: 50%;
		margin-left: -200rpx;
		color: #fff;
	}
}
.mark{
	position: absolute;
	top: 0;
	height: 400rpx;	
	width: 100%;
	background-color: #000000;
	filter: blur(15rpx);
	z-index: 998;
	opacity: 0.2;
}
.top_Img{
	position: relative;
	top: 0;
	height: 400rpx;	
	width: 100%;
	filter: blur(15rpx);
	z-index: 997;
}
.page_list{
	display: flex;
	justify-content: center;
	align-items: center;
	.scroll-Y{
		background-color: #277dff;
		margin: 30rpx;
		border-radius: 20rpx;
		height: 1000rpx;
		background-color: #fff;
		padding: 10rpx;
		.list{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 1rpx #F3F3F3 solid;
			.goods_sort{
				margin-top: 8rpx;
			}
			.goods_price{
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 36rpx;
			}
			.sale{
				background-color: #E5FBDF;
				color: #8abc8c;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				margin-left: 15rpx;
				font-size: 28rpx;
			}
			.lock{
				background-color: #E8E8E8;
				color: #565656;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				margin-left: 15rpx;
				font-size: 28rpx;
			}
		}
	}
}
.search-wrapper {
  height: 60rpx;
  background: #fff;
  border-radius: 30rpx;
  position: relative;
}
.search-wrapper input {
  height: 60rpx;
  padding-left: 30rpx;
  line-height: 60rpx;
  font-size: 22rpx;
}
.search-wrapper button {
  width: 120rpx;
  height: 56rpx;
  background: $uni-bg-color-main-linear;
  border-radius: 28rpx;
  text-align: center;
  line-height: 56rpx;
  font-size: 28rpx;
  position: absolute;
  top: 50%;
  right: 4rpx;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.btn-normal{
	// width: 200rpx;
	background: linear-gradient(270deg,#1a1a1a,#666) !important;
	color: #fff;
}
</style>
